/* Copyright (c) 2019, the Dart project authors.  Please see the AUTHORS file
   for details. All rights reserved. Use of this source code is governed by a
   BSD-style license that can be found in the LICENSE file. */

@use '../../../../third_party/site-shared/dash_design/lib/styles/variables.scss' as dash_variables;

// suggested naming convention:
//
// color definitions:
// `--pub-color-<qualifier><baseColor>`
//
// theme roles:
// `--pub-<role>[-<modifier>]-<property>`, where:
//   - `<role>` may be: `neutral`, `inset`
//   - `<modifier>` may be: `hover`, `selected`
//   - `<property>` may be: `bgColor`, `textColor`, `linkColor`
//
// components (**deprecated**):
// `--pub-[component]-[role]-[property]`, where
//   - `[component]` may be: `default`, `button`, `link`, `card`, ...
//   - `[role]` may be the `background`, `text`, `border`, ... (multiple parts are separated by `_`)
//   - `[property]` may be `color`, `opacity` for specific values, or a `value` for multi-part properties.

/// Variables that are not specific to the light or dark theme.
:root {
  --pub-font-family-headline: "Google Sans Display", "Google Sans", "Roboto", sans-serif;
  --pub-font-family-body: "Google Sans Text", "Google Sans", "Roboto", sans-serif;
  --pub-font-family-code: "Google Sans Mono", "Roboto Mono", "Source Code Pro", Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace;

  --pub-color-white:         #ffffff;
  --pub-color-dangerRed:     #ff4242;

  // These colors are a combination of middle-gray (#808080) and a transparency
  // (alpha) channel, specifying an opaque color that mutes whatever the original
  // color was behind it.
  --pub-overlay-gray-08: #80808008;
  --pub-overlay-gray-30: #80808030;
  --pub-overlay-gray-80: #80808080;

  --pub-hash_link-text-color: #ccc;
  --pub-footer-background-color: #27323a;
  --pub-footer-text-color: #f8f9fa;
  --pub-home_banner-text-color: var(--pub-color-white);
  --pub-home_banner-link-color: #31b0fc;

  --pub-pkg_list_recent_item-text-color: #6d7278;

  --pub-remove_button-background-color: var(--pub-color-dangerRed);
  --pub-remove_button-text-color: var(--pub-color-white);

  --pub-report_header_score_error-text-color: #e13701;
  --pub-report_header_score_warning-text-color: #ffa500;

  --pub-input-placeholder-color: #888;
  --pub-searchbar-background-color: #132030;
  --pub-searchbar-text-color: #8d9399;
  --pub-searchbar_input-background-color: #35404d;
  --pub-searchbar_input-text-color: var(--pub-color-white);
  --pub-searchbar_suggest-background-color: #25303d;
  --pub-searchbar_suggest_hover-background-color: #455060;
  --pub-searchbar_suggest-text-color: #a9a9a9;

  --pub-site_header_banner-background-color: #1C2834;
  --pub-site_header_banner-text-color: #f8f9fa;
  --pub-site_header_banner_hover-background-color: #2b3d50; // 10% lighter than bg color
  --pub-site_header_popup-background-color: #1f3044;
  --pub-site_header_popup-text-color: #f8f9fa;
  --pub-site_header_popup-border-color: #4a5868; // mix of bg+fg color

  --pub-carousel-background-color: rgba(0,0,0,0.85);
  --pub-carousel_nav-background-color: rgba(0,0,0,0.7);
  --pub-carousel_nav_hover-background-color: #4285f4;
  --pub-carousel_screenshot-background-color: rgba(0,0,0,0.7);
  --pub-carousel_screenshot-text-color: var(--pub-color-white);
  --pub-collections_icon-background-color: #aeaeae;
  --pub-thumbnail_container-background-color: var(--pub-color-white); // same in dark mode

  --pub-full_page_mask-background-color: rgba(0, 0, 0, 0.5); // Used to make the inaccessible UI parts fade into the background.
  --pub_tag_simplebadge_warning-background-color: #c0392b;
  --pub_tag_simplebadge_warning-text-color: #f8f8f8;
  --pub-spinner_frame-background-color: rgba(0, 0, 0, 0.2);

  // Material Design theme customizations
  --mdc-theme-primary: #1967d2;
  --mdc-theme-secondary: #0066d9;
  --mdc-typography-font-family: var(--pub-font-family-body);

  --pub-downloads-chart-color-0: var(--pub-markdown-alert-note);
  --pub-downloads-chart-color-bg-0: rgb(9, 105, 218, 0.3);
  --pub-downloads-chart-color-1: var(--pub-markdown-alert-caution);
  --pub-downloads-chart-color-bg-1:rgb(207, 34, 46, 0.3);
  --pub-downloads-chart-color-2: var(--pub-markdown-alert-tip);
  --pub-downloads-chart-color-bg-2: rgb(26, 127, 55, 0.3);
  --pub-downloads-chart-color-3: var(--pub-markdown-alert-important);
  --pub-downloads-chart-color-bg-3: rgb(130, 80, 223, 0.3);
  --pub-downloads-chart-color-4: var(--pub-markdown-alert-warning);
  --pub-downloads-chart-color-bg-4:rgb(154, 103, 0, 0.3);
  --pub-downloads-chart-color-5: #12a4af;
  --pub-downloads-chart-color-bg-5: rgb(18, 164, 175, 0.3);

  // Opacity values used to display monochrome icons.
  --pub-monochrome-opacity-initial: 0.6;
  --pub-monochrome-opacity-hover: 1.0;

  // Incomplete colors for license text edit ops.
  --pub-license-editop-delete: rgba(255, 0, 0, 0.2);
  --pub-license-editop-insert: rgba(255, 255, 0, 0.2);
  --pub-license-editop-match: rgba(0, 255, 0, 0.2);
}

/// Variables that are specific to the light theme.
:root {
  @include dash_variables.light-theme;

  --pub-color-snowWhite:     #fafafa; // slight deviation from official snow-white (fffafa)
  --pub-color-smokeWhite:    #f5f5f7; // slight deviation from official white-smoke (f5f5f5)
  --pub-color-bubblesBlue:   #e7f8ff; // slight deviation from official bubbles-blue (e7feff)

  --pub-neutral-bgColor:       var(--pub-color-white);
  --pub-neutral-borderColor:   var(--pub-color-smokeWhite);
  --pub-neutral-textColor:     var(--dash-surface-fgColor);
  --pub-neutral-hover-bgColor: var(--pub-color-snowWhite);
  --pub-inset-bgColor:         var(--pub-color-smokeWhite);
  --pub-selected-bgColor:      var(--pub-color-bubblesBlue);

  // Note: these colors are copied from GitHub styles
  --pub-markdown-alert-note:      #0969da; // accent-emphasis from GitHub
  --pub-markdown-alert-tip:       #1a7f37; // success-emphasis from GitHub
  --pub-markdown-alert-important: #8250df; // done-emphasis from GitHub
  --pub-markdown-alert-warning:   #9a6700; // attention-emphasis from GitHub
  --pub-markdown-alert-caution:   #cf222e; // danger-emphasis from GitHub

  --pub-code-text-color: var(--pub-neutral-textColor);
  --pub-link-text-color: #1967d2;
  --pub-badge-default-color: var(--pub-link-text-color);
  --pub-badge-red-color: var(--pub-color-dangerRed);
  --pub-button-danger-background: var(--pub-color-dangerRed);
  --pub-copy_feedback-background-color: #fafaff;
  --pub-detail_tab-text-color: var(--pub-neutral-textColor);
  --pub-detail_tab-underline-color: #dddddd;
  --pub-detail_tab-active-color: var(--pub-link-text-color);
  --pub-weekly-chart-main-color: var(--pub-link-text-color);
  --pub-weekly-chart-tooltip-text-color: var(--pub-color-white);
  --pub-detail_tab-admin-color: #990000;
  --pub-home_title-text-color: #254a76;
  --pub-home_card-box_shadow-color: rgba(0, 0, 0, 0.3);
  --pub-home_card_title-text-color: #1967d2;
  --pub-home_card_hover-box_shadow-color: rgba(0, 0, 0, 0.4);
  --pub-pagination-active-color: var(--pub-link-text-color);
  --pub-pagination-inactive-color: #aaaaaa;
  --pub-score_label-text-color: #6d7278;
  --pub-score_value-text-color: var(--pub-link-text-color);
  --pub-sort_control_hover-text-color: var(--pub-neutral-textColor);
  --pub-sort_control_selected-text-color: var(--pub-neutral-textColor);
  --pub-tag_simplebadge-text-color: #444444;
  --pub-tag_sdkbadge-separator-color: rgba(25, 103, 210, 0.5); // #1967d2 + 0.5 opacity;
  --pub-tag_sdkbadge-text-color: #1967d2;

  --pub-downloads-chart-frame-color: #d3d3d3;
  --pub-downloads-chart-tooltip-background: rgba(255, 255, 255, 0.9);
}

.light-theme {
  .displayed-in-dark-theme {
    display: none !important;
  }
}

/// Variables that are specific to the dark theme.
.dark-theme {
  @include dash_variables.dark-theme;

  --pub-color-darkBlack:       #121317;
  --pub-color-darkGunmetal:    #242b32;
  --pub-color-darkGray:        #2f3034; /* derived from dark black by making it lighter */
  --pub-color-darkSteelBlue:   #144466;

  --pub-neutral-bgColor:       var(--pub-color-darkBlack);
  --pub-neutral-borderColor:   var(--pub-color-darkGunmetal);
  --pub-neutral-textColor:     var(--dash-surface-fgColor);
  --pub-neutral-hover-bgColor: var(--pub-color-darkGray);
  --pub-inset-bgColor:         var(--pub-color-darkGunmetal);
  --pub-selected-bgColor:      var(--pub-color-darkSteelBlue);

  // Note: these colors are copied from GitHub styles
  --pub-markdown-alert-note:      #0969da; // accent-emphasis from GitHub
  --pub-markdown-alert-tip:       #1f883d; // success-emphasis from GitHub
  --pub-markdown-alert-important: #8250df; // done-emphasis from GitHub
  --pub-markdown-alert-warning:   #9a6700; // attention-emphasis from GitHub
  --pub-markdown-alert-caution:   #cf222e; // danger-emphasis from GitHub

  --pub-code-text-color: var(--pub-neutral-textColor);
  --pub-link-text-color: #47b0f8;
  --pub-badge-default-color: var(--pub-link-text-color);
  --pub-badge-red-color: var(--pub-color-dangerRed);
  --pub-button-danger-background: #a03737;
  --pub-copy_feedback-background-color: #404040;
  --pub-detail_tab-text-color: var(--pub-neutral-textColor);
  --pub-detail_tab-underline-color: #888888;
  --pub-detail_tab-active-color: var(--pub-link-text-color);
  --pub-detail_tab-admin-color: #ffa000;
  --pub-home_title-text-color: #31b0fc;
  --pub-weekly-chart-main-color: var(--pub-link-text-color);
  --pub-weekly-chart-tooltip-text-color: var(--pub-color-darkGunmetal);
  --pub-home_card-box_shadow-color: rgba(255, 255, 255, 0.2);
  --pub-home_card_title-text-color: var(--pub-home_title-text-color);
  --pub-home_card_hover-box_shadow-color: rgba(255, 255, 255, 0.3);
  --pub-pagination-active-color: var(--pub-link-text-color);
  --pub-pagination-inactive-color: #aaaaaa;
  --pub-score_label-text-color: #a0b0b8;
  --pub-score_value-text-color: var(--pub-link-text-color);
  --pub-sort_control_hover-text-color: var(--pub-neutral-textColor);
  --pub-sort_control_selected-text-color: var(--pub-neutral-textColor);
  --pub-tag_simplebadge-text-color: var(--pub-neutral-textColor);
  --pub-tag_sdkbadge-separator-color: #226699;
  --pub-tag_sdkbadge-text-color: var(--pub-neutral-textColor);

  --pub-downloads-chart-frame-color: #55585a;
  --pub-downloads-chart-tooltip-background: rgba(18, 19, 23, 0.9);

  // Material Design theme customizations
  --mdc-theme-surface: var(--pub-neutral-bgColor);
  --mdc-theme-on-primary: var(--pub-neutral-textColor);
  --mdc-theme-on-secondary: var(--pub-neutral-textColor);
  --mdc-theme-on-surface: var(--pub-neutral-textColor);
  --mdc-checkbox-unchecked-color: #777777;
  --mdc-checkbox-disabled-color: #666666;
  --mdc-filled-button-container-color: rgba(255, 255, 255, 0.1);
  --mdc-filled-button-label-text-color: var(--pub-neutral-textColor);
  --mdc-protected-button-disabled-container-color: rgba(255, 255, 255, 0.1);
  --mdc-protected-button-disabled-label-text-color: var(--pub-neutral-textColor);

  // Pub-specific Material Design overrides
  --mdc_pub-data_table-border-color: var(--mdc-checkbox-unchecked-color);
  --mdc_pub-select-background-color: rgba(255, 255, 255, 0.1);
  --mdc_pub-select-label-color: var(--pub-link-text-color);
  --mdc_pub-select-text-color: var(--pub-neutral-textColor);
  --mdc_pub-text_field-background-color: rgba(255, 255, 255, 0.1);
  --mdc_pub-text_field-border-color: var(--mdc-checkbox-unchecked-color);
  --mdc_pub-text_field-text-color: var(--pub-neutral-textColor);

  // Most of our SVG images are black on transparent background and they
  // are almost invisible in dark mode. Ideally we would have different
  // images for dark mode, or override their `fill` or `stroke` properties
  // via CSS.
  // However, overriding the properties via CSS values or variables was
  // not working (TBD the reason as in other cases it has worked).
  //
  // Until we have duplicate images, this below transformation seem to
  // provide an acceptable workaround: it inverts the image colors, making
  // the dark parts light.
  // TODO(https://github.com/dart-lang/pub-dev/issues/7868)
  .filter-invert-on-dark {
    filter: invert(1);
  }

  // The landing page was designed with a light (white) background, and
  // this image is a grid of lines over that. We don't have an a dark
  // landing page design yet, and the `filter invert(1)` change does not
  // work for background images. Turning off the light grid for now.
  // TODO(https://github.com/dart-lang/pub-dev/issues/7868)
  .landing-main {
    background-image: none;
  }

  .displayed-in-light-theme {
    display: none !important;
  }
}

@mixin elevated-content-border {
  .light-theme & {
    box-shadow: 0px 2px 7px 0px var(--pub-home_card-box_shadow-color);

    &:hover {
      box-shadow: 0px 4px 9px 0px var(--pub-home_card_hover-box_shadow-color);
    }
  }

  .dark-theme & {
    border: 1px solid var(--pub-home_card-box_shadow-color);

    &:hover {
      border-color: var(--pub-home_card_hover-box_shadow-color);
    }
  }
}

@mixin brightness-on-hover {
  transition: 0.3s filter;

  .light-theme & {
    &:hover {
      filter: brightness(80%);
    }
  }

  .dark-theme & {
    &:hover {
      filter: brightness(120%);
    }
  }
}

$device-desktop-min-width: 641px;
$device-mobile-max-width: 640px;
$device-tablet-max-width: 979px;

$downloads-chart-label-max-width: 825px;
$downloads-chart-display-max-width: 1025px;
$downloads-chart-radio-max-width: 650px;

$z-index-nav-mask: 1000;

$site-max-width: 1136px;

// NOTE: keep in sync with hoverable.dart 900ms delay
$copy-feedback-transition-opacity-delay: 0.9s;
